<template>
  <!-- 外层容器，包含按钮组和底部内容 -->
  <div class="sectionBox">


    <!-- 按钮状态组组件，传入时间、函数数据、按钮数据列表和涨跌幅数据 -->
    <!-- <btnStausGroup v-if="btn_funData.length > 0" :allTime="timeDate" :funData="btn_funData" :dataList="btn_dataList"
      :zdfData="btn_zdfData"></btnStausGroup> -->
      <!-- <decrease ref="decrease" v-if="day_data_array != null" :day_list="day_data_array" :inflow="inflow_data"
              :dealFlow="dealFlow"  >
            </decrease> -->
    <article class="bottom" v-if="dataList3.length > 0">
      <!-- 卡片组件，用于包裹标签页 -->
      <el-card class="box-card color2">
        <!-- 标签页组件，绑定激活的标签页名称，并监听标签点击事件 -->
        <el-tabs v-model="activeName">
          <!-- 当前情况标签页 -->
          <el-tab-pane label="当前情况" name="1">
        
            <!-- 内容区域，使用 flex 布局 -->
            <!-- <div class="flex-c content1">
              <proposal1></proposal1>
              <progressBar :this_num="parseFloat(this_all_num.szzs)" v-if="dataList3.length > 0" 
              :szzs_list="dataList3[0].num" :szzs_time="timeDate" ></progressBar>
              <progressBarShu :this_num="parseFloat(this_all_num.szzs)"></progressBarShu>
            </div> -->
            <!-- 周月表格组件，当周月表格数据长度大于 0 时显示 -->
     
            
          
           
    <!-- 基金柱状图组件，当数据列表长度大于 0 时显示 -->
            <histogramFund  ref="tableBox_section" :thame="'dark'"
              :name="'_tableBox_section'" :title="title2" :listData="dataList3" :timeData="timeDate" :width1="width_all"
              :markLine="markLine" :height1="'650px'" :markPoint="markPoint2" :areaStyle="areaStyle1"
              :visualMap="visualMap2" :legend1="legend1"></histogramFund>
            <h4> 有{{dataList3[0].num.length-dataList3[1].num.length}}天没有更新数据</h4>
          </el-tab-pane>
          <!-- 收益分析标签页 -->
          <el-tab-pane label="收益分析" name="2">
            <decreaseHistogram
              v-if="diy_data_decrease != null"
              :day_data_array="day_data_array"
              :indexfun1="day_data_array"
              :diyData="diy_data_decrease"
            >
            </decreaseHistogram>
            <weekMoonTable v-if="weekMoonTable_data.length > 0" :weekMoonTable_data="weekMoonTable_data">
            </weekMoonTable>
            <!-- 表格组件 -->
            <!-- <tableBox></tableBox>
            <tableBox1></tableBox1> -->
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </article>
  </div>
</template>
<script>
import decrease from "./../analysisItem/common/decrease/decrease.vue";
import {
  cybUrl,
  szzsUrl
} from "../../lib/api/api_url.js";
import excelUtil from "./../../person/js/excelUtil.js"
import vacation from "./../../person/json/vacation.json"
import bugson from "../indexItem/item/index1/json/bug.json";
import {
  getAjax
} from "../../assets/common.js";
import histogramFund from "../analysisItem/histogramFund.vue";
import btnStausGroup from "../../../components/polyline/btnStausGroup.vue";
import weekMoonTable from "../../person/views/components/weekMoonTable.vue";
import progressBar from "./sectionBoxItem/progress_bar.vue"
import progressBarShu from "./sectionBoxItem/progress_bar_shu.vue"
import decreaseHistogram from "../analysisItem/common/decreaseHistogram.vue";
export default {
  data() {
    return {
      //设置当前的值是多少
      this_all_num: {
        szzs: 0,
      },
      timeDate: [],
      dataList3: [],
      width_all: "800px",
      dataList: [],
      title2: "上证指数",
      markLine: [],
      score1: 40,
      activeName: "1",
      percentage: 10,
      areaStyle1: [],
      legend1: undefined,
      visualMap2: null,
      legend2: null,
      markPoint2: [],
      weekMoonTable_data: [],
      //选择按钮
      btn_funData: [],
      btn_dataList: [],
      btn_zdfData: [],
      inflow_data: [],
      day_data_array: null,
      dealFlow: null,
      zhidie_array:0,
      bug_shell_a_d_a:null,
      diy_data_decrease:null,
    };
  },
  components: {
    proposal1: () =>
      import("./sectionBoxItem/proposal1.vue"),
    tableBox: () =>
      import("../indexItem/item/index/tableBox.vue"),
    tableBox1: () =>
      import("../indexItem/item/index/tableBox1.vue"),
    histogramFund,
    weekMoonTable,
    btnStausGroup,
    progressBar,
    progressBarShu,
    decrease,
    decreaseHistogram


  },
  created() {
    let that = this;
    let szzs = getAjax(szzsUrl(908));
    szzs = szzs.responseJSON.data;
    szzs = this.dealData(szzs.klines, 2, szzs.name, 2);

    let cyb_data = getAjax(cybUrl(908));
    cyb_data = cyb_data.responseJSON.data;
    cyb_data = this.dealData(cyb_data.klines, 2, cyb_data.name, 2);

    let date_sz_time = szzs.time.findIndex((item) => {
      return item === "2021-10-08"
    })
    date_sz_time = szzs.time.length - date_sz_time;

    this.timeDate = szzs.time.slice(-date_sz_time);

    excelUtil.dealPersonData().then(res => {
      let all_data = []; //总额度涨跌幅
      for (let i = 0; i < res[0].length; i++) {
        all_data.push(parseInt(res[0][i].num));
      }
      let data1 = [];
      for (let i = 0; i < res[1].length; i++) {
        data1.push(res[1][i].num);
      }
      const all_financial = [];
      const rish_data = [];
      const weekMoonTable_data1 = [];
      const all_rish_data = []; 
      const my_buy_sell_data = []
      let data1_time = this.timeDate.slice(0, all_data.length);
      let all_money_add_rish=[];//本金+亏损
      let deal_rish_data=[];// 总的涨跌幅比例
      let deal_rish_item=0;
      res[2].forEach((item,index) => {
        const this_time = item.time.trim();
        const if_time = data1_time.indexOf(this_time);

        if (if_time !== -1) {
          const num = parseInt(item.num, 10);
          const ratio = (parseFloat(data1[if_time]) / num) * 100;
          const formattedRatio = parseFloat(ratio.toFixed(2));

          rish_data.push(formattedRatio);
          all_financial.push(num);
          weekMoonTable_data1.push({ num: formattedRatio, time: this_time });
          deal_rish_item=deal_rish_item+formattedRatio
          deal_rish_data.push(deal_rish_item)
          if (all_data[if_time] !== undefined) {
            const allDataValue = parseFloat(all_data[if_time]);
            all_money_add_rish.push(Math.abs(allDataValue)+num)
            const allRishRatio = allDataValue / (num + Math.floor(Math.abs(allDataValue)));
            all_rish_data.push((allRishRatio * 100).toFixed(2));

            let targetIndex = res[3].findIndex(item => item.time === this_time);
            if (targetIndex == -1) {
              my_buy_sell_data.push(0)
            } else {
              my_buy_sell_data.push(res[3][targetIndex].num)
            }

          }
        }
      
      });
  
      this.weekMoonTable_data = weekMoonTable_data1
      let szjson1 = {
        all_data: all_data,
        data: data1,
        all_financia: all_financial,
        rish_data: rish_data,
        all_rish_data: all_rish_data,
        my_buy_sell_data: my_buy_sell_data,
        buy_shell_data_chs:res[3],
        all_money_add_rish:all_money_add_rish,//总资金
        data1_time:data1_time,//目前输入的全部时间
        deal_rish_data:deal_rish_data,//总的涨跌幅
      }
      console.log('szjson1', szjson1)
      this.dealFlow = res[3]
      this.initData(szzs, szjson1, -all_data.length, date_sz_time, cyb_data)
      this.$nextTick(() => {
        that.markPoint2 = that.setMarkPoint(that.dataList3[0].num, that.timeDate);

      });
    })

    excelUtil.myHoldSector().then(res => {
      console.log('myHoldSector', res)
    })
  },
  mounted() {
  },
  methods: {
    dealLineData(this_time, type2) {},
    //处理返回来的数据
    dealStausPoint(deal_data) {
      let that = this;
      //处理数据
      let select_data = that.dataList3;
      that.dataList3 = [];
      that.markPoint2 = null;
      setTimeout(() => {
        that.dataList3 = select_data;
        that.markPoint2 = deal_data;
      }, 1000);

    },

    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },


    initData(szzs, szjson, end_num, date_sz_time, cyb_data) {
      this.btn_funData = [
        szzs.num.slice(-date_sz_time),
        szjson.all_financia.slice(-date_sz_time),
        szjson.all_data,
        szjson.data.slice(end_num),
        szjson.rish_data.slice(-date_sz_time),
      ];
      this.btn_dataList = [
        {
          name: '上证指数',
          state: 1,
          color: "#4992ff"
        },
        {
          name: '资金走势图',
          state: 1,
          color: "#7cffb2"
        },
        {
          name: '总资金盈亏情况',
          state: 1,
          color: "#fddd60"
        },
        {
          name: '我的每日涨跌幅',
          state: 2,
          color: "#ff6e76"
        },
        {
          name: '涨跌幅值',
          state: 2,
          color: "#ff6e96"
        }
      ];
      this.btn_zdfData = szjson.all_rish_data.slice(-date_sz_time)
      this.this_all_num.szzs = szzs.num[szzs.num.length - 1]
      this.dataList3.push({
        array: [],
        num: szzs.num.slice(-date_sz_time),
        name: "上证指数",
        time: [],
      })
      this.dataList3.push({
        array: [],
        num: szjson.all_financia.slice(-date_sz_time),
        name: "资金走势图",
        time: [],
      })

      this.dataList3.push({
        array: [],
        num: szjson.all_data,
        name: "总资金盈亏情况",
        time: [],
      });
      this.dataList3.push({
        array: [],
        num: szjson.all_rish_data.slice(-date_sz_time),
        name: "总资金涨跌百分比走势",
        time: [],
      })

      this.dataList3.push({
        array: [],
        num: szjson.data.slice(end_num),
        name: "我的每日涨跌值",
        type_echarts: "bar",
        itemStyle: 2,
        time: [],
      });

      //  this.dataList3.push({
      //         array: [],
      //         num: cyb_data.num.slice(-date_sz_time),
      //         name: "创业板",
      //         time: [],
      //       })

      this.dataList3.push({
        array: [],
        num: szjson.my_buy_sell_data,
        name: "我的买入卖出情况",
        // type_echarts: "bar",
        // itemStyle: 2,
        time: [],
      })

      this.dataList3.push({
        array: [],
        num: szjson.rish_data.slice(-date_sz_time),
        name: "涨跌幅值",
        // type_echarts: "bar",
        // itemStyle: 2,
        time: [],
      })
      let updown = this.dealUpDown(szjson.data.slice(end_num));
    
      //this.dataList3.push(updown[0]);
      // this.dataList3.push(updown[1]);
    //  this.bug_shell_a_d_a={
    //   bug_shell_all_data_array:szjson.all_financia.slice(-date_sz_time),
    //   shell_cben_array:szjson.all_data,
    //  }

      let new_array1 = [{
        name: "危险+5",
        num: -90000,
      }, {
        name: "危险+3",
        num: -72000,
      },
      {
        name: "止损位",
        num: 0,
      },
      ];
      //    this.markLine = this.dealmarkLine(new_array1, this.timeDate);
      this.legend1 = {
        selected: {
          上证指数: false,
          // 通过selected的图例选中状态来控制你要显示的个数
          资金走势图: false,
          涨跌幅值: false,
          我的买入卖出情况: false,
        },
      };
      this.areaStyle1 = [null, {}, null, null];
      let array3_num = szjson.data.slice(end_num);
      var maxVal = Math.max.apply(null, array3_num);
      this.visualMap2 = [{
        show: false,
        pieces: [{
          gt: 0,
          lte: 0,
          color: "#e72243",
        },
        {
          gt: -10000,
          lte: maxVal,
          color: "#26D4AD",
        },
        ],
        outOfRange: {
          color: "#26D4AD",
        },
      },];
      this.inflow_data = szjson.rish_data.slice(-2);
      this.day_data_array={
        name:'我的资金情况',
        array:szjson.rish_data.slice(-date_sz_time),
        inflow:szjson.all_rish_data.slice(-date_sz_time),
        num:szjson.all_data,
        time:this.timeDate.slice(0,-end_num),
      }
    
      this.diy_data_decrease={
        decrease:{
          day_loss_profit:szjson.all_data,
          bug_shell_all_data_array:szjson.all_financia.slice(-date_sz_time),
          shell_cben_array:szjson.all_data
        },
        inflow_data:this.inflow_data,
        dealFlow:this.dealFlow,
        all_time:szjson.data1_time,
        list_data:[
          {
            name:'累计涨跌幅',
            num:szjson.deal_rish_data,
          },
          {
            name:'盈亏变化',
            num:szjson.all_data,
          },{
            name:'每日输入变化',
            num:szjson.all_financia.slice(-date_sz_time)
          },{
            name:'成本变化',
            num:szjson.all_money_add_rish,
          },{
            name:'每日买入卖出',
            num:szjson.my_buy_sell_data, type_echarts: "bar", itemStyle: 2
          },
        ]
      }
    },

    //处理每日涨跌幅的百分百
    //工具本钱的初始化的是多少
    dealUpDown(data1) {
      let end_array = [];
      let end_data = 0;
      let end_array1 = [];
      let num_all = 200000; //总的金额
      data1.forEach((Element, index) => {
        let this_num = parseFloat(Element);
        let deal_data = (this_num / num_all) * 100;
        end_data = end_data + deal_data;
        end_array.push(parseFloat(deal_data.toFixed(3)));
        end_array1.push(parseFloat(end_data.toFixed(3)));
      });
      return [{
        name: "涨跌百分比",
        num: end_array,
        type_echarts: "bar",
        itemStyle: 2,
      },
      {
        name: "累计的涨跌幅",
        num: end_array1,
      },
      ];
    },
    //上证指数数值，判断的数值，时间
    setMarkPoint(num_data, this_time) {
      let array1 = [];
      let type1 = ["买进", "卖出", "持有", "加仓", "等待"];
      let bug_json = bugson.data[0].data;
      vacation.vacation.forEach((item, index) => {
        var item1 = null;
        item1 = {
          name: "买卖操作逻辑",
          value: "+" + item.holiday_name,
          xAxis: item.date,
          yAxis: num_data[this_time.indexOf(item.date)],
          itemStyle: {
            color: "red",
          },
        };
        array1.push(item1);
      });
      return [{
        data: array1,
      }, {


      },];
    },
    //设置折线图的判断线的
    dealmarkLine(new_array1_DATA, time1) {
      let that = this;
      let new_array1 = new_array1_DATA;
      let new_array2 = [];
      new_array1.forEach((item, index) => {
        let item1 = {
          name: item.name + "(" + item.num + ")",
          yAxis: item.num,
          // 单独配置每条线的样式
          lineStyle: {
            width: 2,
            color: item.active ? "red" : "#ffffff",
          },
          label: {
            // padding: [-13, -20, 15, -45],
            formatter: item.name + "(" + item.num + ")",
          },
        };
        new_array2.push(item1);
      });

      return [{}, {
        itemStyle: {
          normal: {
            lineStyle: {
              type: "dashed",
              // 这儿设置的颜色是公共配置，如需单独配置，请在data里配置
              // color: '#000',
            },
            label: {
              show: true,
              position: "end",
            },
          },
        },
        data: new_array2,
      },];
    },
    dealmarkLine2(data2, this_time) {
      let that = this;
      //设置支撑位的位置
      let new_array1 = [{
        name: "支撑位",
        value2: 2886.36,
      },];
      let new_array2 = [];
      new_array1.forEach((item, index) => {
        let start_num = this_time[this_time.length - 1];
        let item1 = [{
          coord: [this_time[0], item.value2],
          symbol: "circle",
          name: item.name + "(" + item.value2 + ")",
          symbolSize: 6,
        },
        {
          symbolSize: 6,
          name: item.name,
          label: {
            position: "end",
          },
          coord: [start_num, item.value2],
          symbol: "arrow",
        },
        ];
        new_array2.push(item1);
      });
      this.markLine = [{
        data: new_array2,
        lineStyle: {
          width: 3,
          color: "#ffffff",
        },
      },];
    },

    dealData(data2, type, name, num) {
      let num2 = 100;
      let that = this;
      let array2 = [];
      let time1 = [];
      let num1 = [];
      data2.forEach((element2, index2) => {
        if (index2 <= data2.length) {
          if (type == 1) {
            array2.push(element2[6].toFixed(2));
            time1.push(dateFormat("YYYY-mm-dd", new Date(element2[9] * 1000)));
            num1.push(element2[1]);
          } else if (type == 2) {
            array2.push(element2.split(",")[8]);
            time1.push(element2.split(",")[0]);

            if (num == 6) {
              num1.push(
                (parseInt(element2.split(",")[num]) / 10000000).toFixed(2)
              );
            } else {
              num1.push(element2.split(",")[num]);
            }
          } else if (type == 3) {
            num1.push((element2.split(",")[num] / 100000000).toFixed(2));
          }
        }
      });

      let object1 = {
        name: name,
        num: num1,
        time: time1,
        array: array2,
      };
      return object1;
    },
  },
};
</script>
<style scoped lang="scss">
.img-r {
  img {
    width: 100%;
    height: auto;
  }
}

.color2 {
  background-color: #eff3f8;
}

.content1 {
  margin: 0px 0px 0px 0px;
  justify-content: center;
}

.el-button+.el-button {
  margin-left: 0px;
  margin-top: 10px;
  display: block;
}

.head {
  background: #895fa7;
  padding: 0px 10px;
  border: 0px dashed #dda4eb;
  box-shadow: 0px 0px 0px 0px #58436a;
  color: white;
}

.sectionBox {
  background-color: #ffffffba;

  .swiper-box {
    position: relative;
    overflow: hidden;
  }

  article {
    margin-bottom: 0px;
  }

  .bottom {
    padding: 0px 0px;
    margin-bottom: 0px;
  }

  .box-card {
    margin-left: 0px;
  }

  .section1 {
    width: 300px;
    height: 300px;
  }
}
</style>